<template>
  <div id="out">
    <!-- 顶部标题栏 -->
    <TitleBar @clickLeft="clickLeft" @clickRight="clickRight" class="homeTitleBar">
      <!-- 使用时通过具名插槽指明left,center,right的内容 -->
      <!-- <img slot="left" src="~assets/img/titlebar/back.svg" /> -->
      <!-- 指明titleBar的中间部分内容 -->
      <div slot="center">首页</div>
      <!-- 指明titleBar的右边部分内容 -->
      <!-- <img slot="right" src="~assets/img/titlebar/share.svg" /> -->
    </TitleBar>

    <!-- 需要吸顶的TabControl -->
    <TabControl
      :currentIndex="currTabIndex"
      v-show="isShowTopTabControl"
      class="tab-control-view"
      ref="tabControl"
      @onTabItemClick="tabItemClick"
      :titles="['流行','新款','精选']"
    />
    <!-- 
      滚动组件,这里需要监听滚动事件,所以probeType绑定为3,如果不需要监听滚动事件可以不绑定该属性
      滚动事件的回调,通过绑定@scroll="接受事件",并且通过回调参数获取对象对象
    -->
    <Scroll
      class="home-content"
      ref="scroll"
      :probeType="3"
      :pullUpLoad="true"
      @scroll="scrollTop"
      @loadMore="loadMore"
    >
      <!-- 轮播图部分 -->
      <home-swiper :banners="bannerDatas" ref="hSwiper" @imgLoadFinish="imgLoadFinish"></home-swiper>

      <!-- 推荐部分 -->
      <RecomendView :datas="recommendPeoples"></RecomendView>

      <!-- 本周流行 -->
      <fashion-view :fashinonDatas="fashionDatas"></fashion-view>

      <!-- table控制栏部分 -->
      <TabControl
        :currentIndex="currTabIndex"
        ref="tabControl"
        @onTabItemClick="tabItemClick"
        :titles="['流行','新款','精选']"
      ></TabControl>

      <!-- 展示流行,新款,就精选的数据组件 -->
      <GoodsList :goodsList="goodList"></GoodsList>
    </Scroll>

    <!-- 回到顶部组件,这里有个知识点:监听组件的点击事件必须使用natvie修饰符 -->
    <back-top @click.native="backTop" v-show="isShowBackTop" />
  </div>
</template>

<script>
//引入轮播图组件
import HomeSwiper from "./childcomponents/HomeSwiper";
//引入RecomendView推荐组件
import RecomendView from "./childcomponents/RecomendView";
import { getHomeData, getHomeGoods } from "network/api/home.js";

//引入流行的组件
import FashionView from "./childcomponents/FashionView";

//引入TitleBar组件
import TitleBar from "components/common/titlebar/TitleBar";

//引入TabControl组件
import TabControl from "components/content/tabcontrol/TabControl";

//引入商品展示组件
import GoodsList from "components/content/goodslist/GoodsList";

//引入回到顶部的组件
import BackTop from "components/content/backtop/BackTop";

//引入滚动组件
import Scroll from "components/common/scroll/Scroll";

//导入回到顶部BackTop组件的混入对象
import { backTopMixin } from "utils/Mixin.js";

export default {
  data() {
    return {
      //推荐人的数据
      recommendPeoples: [],
      //轮播图的数据
      bannerDatas: [],
      //本周流行的数据
      fashionDatas: [
        { name: "美女一", img: require("../../assets/img/home/1.jpg") },
        { name: "美女二", img: require("../../assets/img/home/2.jpg") },
        { name: "美女三", img: require("../../assets/img/home/3.jpg") },
        { name: "美女四", img: require("../../assets/img/home/5.jpg") },
        { name: "美女五", img: require("../../assets/img/home/6.jpg") },
        { name: "美女六", img: require("../../assets/img/home/6.jpg") },
        { name: "美女七", img: require("../../assets/img/home/7.jpeg") },
        { name: "美女八", img: require("../../assets/img/home/8.jpg") }
      ],
      //定义商品数据,包含流行,新款,精选的数据模型
      goods: {
        popDatas: { list: [], page: 1 },
        newDatas: { list: [], page: 1 },
        sellDatas: { list: [], page: 1 }
      },
      //选中的table名称,默认是popDatas
      tableName: "popDatas",
      //记录TabControl的offsetTop
      tabOffSet: 0,
      //是否需要显示吸顶的TabControl标识
      isShowTopTabControl: false,
      //TableControl的默认选中位置
      currTabIndex: 0,
      //记录离开当前页面时的滚动距离
      saveY: 0
    };
  },
  created() {
    //获取推荐和轮播图数据
    this.getHomeTopData();
    //获取流行,新款,精选的数据
    this.httpHomeGoods("pop", 1);
    this.httpHomeGoods("new", 1);
    this.httpHomeGoods("sell", 1);
  },
  methods: {
    //获取轮播图数据
    getHomeTopData() {
      getHomeData()
        .then(res => {
          //获取推荐的数据
          this.recommendPeoples = res.data.recommend.list;
          //获取轮播图数据
          this.bannerDatas = res.data.banner.list;
        })
        .catch(err => {});
    },
    //左箭头点击事件
    clickLeft() {},
    //右图标的点击事件
    clickRight() {},
    //获取流行,新款,精选的方法
    httpHomeGoods(type, page) {
      getHomeGoods(type, page)
        .then(res => {
          if (1001 == res.returnCode) {
            //获取返回成功的数据集合
            var resData = res.data.list;
            //返回成功
            switch (type) {
              case "pop":
                this.goods.popDatas.list.push(...resData);
                this.goods.popDatas.page++;
                break;
              case "new":
                this.goods.newDatas.list.push(...resData);
                this.goods.newDatas.page++;
                break;
              case "sell":
                this.goods.sellDatas.list.push(...resData);
                this.goods.sellDatas.page++;
                break;
            }
            //上拉加载更多之后调用滚动组件的结束加载更多的方法
            this.$refs.scroll.finishPullUp();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //table栏流行,新款,精选的点击事件
    tabItemClick(index) {
      switch (index) {
        case 0:
          this.tableName = "popDatas";
          break;
        case 1:
          this.tableName = "newDatas";
          break;
        case 2:
          this.tableName = "sellDatas";
          break;
      }
      //重置TableControl的选中位置
      this.currTabIndex = index;
    },
    //滚动组件的滚动事件监听
    scrollTop(positon) {
      //第一步:处理回到顶部的组件是否显示
      //通过判断滚动距离是否大于1000来决定回到顶部组件的显示与隐藏
      this.isShowBackTop = Math.abs(positon.y) > 1000;
      //第二步:处理TabControl的吸顶效果
      this.isShowTopTabControl = Math.abs(positon.y) > this.tabOffSet;
    },
    //上拉加载更多的方法
    loadMore() {
      //确定请求的tab标签数据以及页码
      let currType = "pop";
      let currPage = this.goods[this.tableName].page;
      switch (this.tableName) {
        case "popDatas":
          currType = "pop";
          break;
        case "newDatas":
          currType = "new";
          break;
        case "sellDatas":
          currType = "sell";
          break;
      }
      this.httpHomeGoods(currType, currPage);
    },
    //轮播图中图片是否加载完成的事件,这里为了获取TabControl吸顶栏的初始的offset距离,需要在页面的图片加载完成之后获取该值
    //由于录播图的图片相对较大,如果轮播图的图片都已经加载完成了,其它组件的图片基本也加载完成了,所以此时获取offset值是准确的
    imgLoadFinish() {
      //记录tabOffSet
      this.tabOffSet = this.$refs.tabControl.$el.offsetTop;
    }
  },
  mounted() {
    //图片加载完成的监听,这里通过防抖函数来只刷新一次
    //通过VueBus注册商品列表子条目的图片加载完成的事件
    let refresh = this.CommonUtils.dobounce(this.$refs.scroll.refresh, 50);
    this.$bus.on("imgLoadCom", () => {
      refresh();
    });
  },
  activated() {
    //当前路由处于激活时调用
    //1:让页面滚动到离开时的位置
    this.$refs.scroll.scrollTo(0, this.saveY, 0);

    //2:重新刷新scroll,防止不能加载更多
    this.$refs.scroll.refresh();
  },
  deactivated() {
    //当前路由处于不激活时调用,记录下滚动距离
    this.saveY = this.$refs.scroll.getScrollY();
  },

  //申明混入对象
  mixins: [backTopMixin],
  destroyed() {
    //销毁时接触关闭事件
    this.$bus.off("imgLoadCom");
  },
  //计算属性
  computed: {
    goodList() {
      return this.goods[this.tableName].list;
    }
  },
  components: {
    TitleBar,
    RecomendView,
    HomeSwiper,
    FashionView,
    TabControl,
    Scroll,
    GoodsList,
    BackTop
  }
};
</script>

<style lang="scss"  scoped>
.homeTitleBar {
  background-color: var(--color-high-text);
  color: white;
}
.out {
  position: relative;
}
.home-content {
  position: absolute;
  top: 44px;
  bottom: 49px;
  overflow: hidden;
}

.tab-control-view {
  position: relative;
  z-index: 9;
}
</style>
